<template>
  <div class="money_balance">
    <div class="money_balance_mode dip ju_al_lf">支付方式:</div>
    <!-- 在线支付 -->
    <div class="money_balance_padfr" v-if="wechet">
      <!-- 小于1000 -->
      <div class="money_balance_box money_balance_padfrf dip ju_al_bet" v-for="(itemsf,index) in  moneybalance" :key="index" @click="addactiveIMG(index,moneybalance)" v-if="itemsf.ifblock">
        <span class="money_logoIMg" >
          <img :src="'./static/images/Order/'+itemsf.logoUrl+''" alt="">
        </span>
        <span class="money_txet dip ju_al_lf">
          <i>{{itemsf.text}}</i>
          <i class="money_txet_child" v-if="itemsf.block">（可用余额：<em>￥{{money.data.accountBalance}}</em>）</i>
        </span>
        <span class="money_activeIMg">
          <img :src="'./static/images/Order/'+itemsf.activeIMg+''" alt="" v-if="itemsf.ind">
          <img :src="'./static/images/Order/'+itemsf.activeIMgnone+''" alt="" v-else>
        </span>
      </div>
      <!-- 大于1000 -->      
      <div class="money_balance_box money_balance_padfrf dip ju_al_bet"  v-if="moneywechetNone.ifblock">
        <span class="money_logoIMg" >
          <img :src="'./static/images/Order/'+moneywechetNone.logoUrl+''" alt="">
        </span>
        <span class="money_txet dip ju_al_lf">
          <i class="text_acirve">{{moneywechetNone.text}}</i>
        </span>
        <span class="money_activeIMg">
          <img :src="'./static/images/Order/'+moneywechetNone.activeIMgnone+''" alt="">
        </span>
      </div>
      <!-- 这是判断显示余额 -->
      <!-- <div class="posi_abs" v-if="moneybalance.ifText"></div> -->
    </div>
    <!-- 这是货到付款 -->
    <div class="money_balance_padfr" v-if="huo">
      <div class="money_balance_box dip ju_al_bet" v-for="(items,indexs) in  moneybalancehuo" :key="indexs" @click="addactiveIMG(indexs,moneybalancehuo)">
        <span class="money_logoIMg" >
          <img :src="'./static/images/Order/'+items.logoUrl+''" alt="">
        </span>
        <span class="money_txet dip ju_al_lf">
          <i>{{items.text}}</i>
          <i class="money_txet_child" v-if="items.block">（可用余额：<em>￥{{items.text}}</em>）</i>
        </span>
        <span class="money_activeIMg">
          <img :src="'./static/images/Order/'+items.activeIMg+''" alt="" v-if="items.ind">
          <img :src="'./static/images/Order/'+items.activeIMgnone+''" alt="" v-else>
        </span>
      </div>
    </div>
    <!-- 显示框 -->
    <div class="posi_block_wechetnone" v-if="moneywechetNone.ifblock">由于微信单次支付金额不可超出10000.00请用余额进行支付</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      moneybalance:[
        {
          logoUrl:'Order_yue.png',
          text:'余额支付',
          ind:true, //变换背景
          block:true, //显示额
          ifblock:true, //这是显示微信点击的事件,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'balancePayment'
        }
        ,{
          logoUrl:'Order_wechet.png',
          text:'微信支付',
          ind:false,
          block:false,
          ifblock:true,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'WeChatPayment'
        }
      ],
      moneywechetNone:{
        logoUrl:'money_active_wechet.png',
        text:'微信支付 ',
        ifblock:false, //这是显示
        activeIMgnone:'ORder_cool.png',
      },
      moneybalancehuo:[
        {
          logoUrl:'daofu_icon.png',
          text:'货到付款',
          ind:true,
          block:false,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
        }
      ],
      wechet:'',
      huo:'',
      money:'',//获取
    }
  },
  methods:{
    addactiveIMG(index,typr){
      if(typr.length >=2){
        for(var i = 0;i<typr.length;i++){
          typr[i].ind = false;
        }
        typr[index].ind = true;
        sessionStorage.setItem('moneybalanc',typr[index].moneybalanceS)     
      // }else{       
      //   typr[index].ind = !typr[index].ind
      }
    }
  },
  created(){
    this.money = JSON.parse(sessionStorage.getItem('orderDetails')) //获取money
    this.Rurtuurlpay = this.$route.params.pay //这是判断 支付方式
		if(this.Rurtuurlpay == 2){
      this.wechet = true
      this.huo = false
      if(this.money.data.orderAmount >= 1000){
      // if(money.data.orderAmount <= 1000){ //实验(上线要改)
        this.moneybalance[1].ifblock = false
        this.moneywechetNone.ifblock = true
      }else{
        this.moneybalance[1].ifblock = true
       this.moneywechetNone.ifblock = false //如果money没有大于一万 就可以支付
      }
		}else if(this.Rurtuurlpay == 1){
      this.wechet = false
      this.huo = true  
    }
    for(var i = 0;i<this.moneybalance.length;i++){
     if(this.moneybalance[i].ind == true){
      sessionStorage.setItem('moneybalanc',this.moneybalance[i].moneybalanceS)
     }
    }
  }
}
</script>
<style lang="scss" scoped>
.money_balance{
  width: 100%;
  background: #fff;
  height: 2.05rem;
  .money_balance_mode{
    padding:.4rem;
    border-bottom:.02rem solid #f2f2f2;
    font-size: .24rem;
    color:#333;
    font-weight: 600;
  }
  .money_balance_padfr{
    padding:0rem .4rem;
    width: 100%;
    height: 100%;
  }
  .money_balance_box{
    height: 49.8%;
    border-bottom:.02rem solid #f2f2f2;
    position: relative;
    // .posi_abs{
    //   height: 100%;
    //   width: 100%;
    //   position: absolute;
    //   top:0;
    //   left:0;
    //   background: rgba(255,255,255,.01);
    //   z-index: 2;
    // }
    img{
      width: 100%;
      height: 100%;
    }
    .money_logoIMg{
     width: 7%;
      height: 43%;
      margin-left:6%;
    }
    .money_txet{
      font-size: .28rem;
      color:#666;
      width: 82%;
      height: 52%;
      font-weight: 600;
      padding-left:.4rem;
      .text_acirve{
        color:#C6C6C6;
      }
      .money_txet_child{
        font-size: .24rem;
        color:#666666;
        font-family: Arial;
        em{
          color:#FF7200;
        }
      }
    }
    .money_activeIMg{
      width: 7%;
      height: 43%;
      margin-right:6%;
    }
  }
  .money_balance_padfrf{
    &:last-child{
      border-bottom:0;
    }
  }
  .posi_block_wechetnone{
    position: relative;
    width: 100%;
    height: 1.06rem;
    background: #f2f2f2;
    text-align: center;
    line-height: 1.06rem;
    font-size: .2rem;
    color:#FF7200;
    font-weight: 600;
  }
}
</style>
